<template>
  <div>
    <div class="container">
      <Header />

      <div class="cart_title">
        <div class="cart_lf">
          <div class="cart_logo"><img src="/images/logo.png" alt="" /></div>
          <div class="cart_text">
            <a href="">订单列表</a>
          </div>
          <div class="cart_tips">
            <a href="">请慎防钓鱼链接或诈骗电话,了解更多></a>
          </div>
        </div>
        <div class="cart_rg">
          <div class="cart_username">zero</div>
        </div>
      </div>
      <div class="content">
        <div class="list_box">
          <div class="list_header">
            <div class="list_lf">
              <div class="date">2021年9月20日</div>
              <div class="username">zero</div>
              <div class="orderNum">订单号:5137008156809646</div>
              <div class="tips">在线支付</div>
            </div>
            <div class="list_rg">
              <div class="money">应付金额:1998.00元</div>
            </div>
          </div>
          <div class="list_content">
            <div class="con_left">
              <div class="goods_img">
                <img src="/images/note8.png" alt="" />
              </div>
              <div class="goods_title">
                <a href="">Redmi Note8 4GB+64GB 皓月白 64GB</a>
              </div>
              <div class="goods_num">999元X2</div>
            </div>
            <div class="con_right">
              <a href="">立即付款 ></a>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss"scoped>
.cart_title {
  width: 100%;
  height: 100px;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  .cart_lf {
    position: absolute;
    left: 15%;
    // display: inline-block;
    float: left;
    display: block;
    .cart_logo {
      margin: 20px 0;
      float: left;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .cart_text {
      height: 100px;
      float: left;
      margin: 0 auto;
      a {
        display: block;
        margin: 0 auto;
        font-size: 22px;
        color: black;
        margin: 30px 10px;
      }
    }
    .cart_tips {
      display: inline-block;
      width: 300px;
      height: 30px;
      margin: 0 auto;
      float: left;
      margin: 35px 0px;
      font-size: 14px;
      color: #666;
      a {
        color: #666;
      }
    }
  }
  .cart_rg {
    float: right;
    position: absolute;
    margin: 35px 0;
    right: 15%;
  }
}
.content {
  width: 100%;
  height: 400px;
  border-top: 2px solid orangered;
  .list_box {
    width: 1000px;
    height: 150px;
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid #ccc;
    .list_header {
      width: 100%;
      height: 50px;
      display: inline-block;
      // margin: 0 auto;
      background-color: rgb(240, 200, 176);
      .list_lf {
        float: left;
        .date,
        .username,
        .orderNum,
        .tips {
          float: left;
          margin: 15px;
          padding-right: 20px;
          border-right: 1px solid #666;
        }
      }
      .list_rg {
        .money {
          margin: 15px;
          float: right;
        }
      }
    }
    .list_content {
      width: 100%;
      .con_left {
        float: left;
        .goods_img,
        .goods_tilte,
        .goods_num {
          float: left;
        }
        .goods_img {
          margin: 10px;
          width: 100px;
          height: 100px;
          img {
            width: 60px;
            height: 70px;
          }
        }
        .goods_title {
          width: 400px;
          margin: 15px 0;
          display: block;
          a {
            color: black;
          }
        }
        .goods_num {
          margin: 0 20px;
        }
      }
      .con_right {
        float: right;
        margin: 30px;
        a {
          color: orangered;
        }
      }
    }
  }
}
</style>